<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>网站设置-主页</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/layuimini/lib/layui-v2.6.3/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/layuimini/css/public.css}" media="all">
    <style th:inline="text">
        .layuimini-form > .layui-form-item > .layui-form-label {
            width: 130px !important;
        }
        .layuimini-form > .layui-form-item > .layui-input-block {
            margin-left: 150px !important;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="layui-form layuimini-form layui-row">
            <div class="layui-col-xs12 layui-col-sm12 layui-col-md6 layui-col-lg6">
                <input name="recordId" type="hidden" th:value="${sysConfig?.recordId}"/>
                <div class="layui-form-item">
                    <label class="layui-form-label required">系统名称(简称)</label>
                    <div class="layui-input-block">
                        <input type="text" name="systemName" lay-verify="required" lay-reqtext="系统名称(简称)不能为空" placeholder="请输入系统名称(简称)"  th:value="${sysConfig?.systemName}"  class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label required">系统名称(全称)</label>
                    <div class="layui-input-block">
                        <input type="text" name="systemFullName" lay-verify="required" lay-reqtext="系统名称(全称)不能为空" placeholder="请输入系统名称(全称)"  th:value="${sysConfig?.systemFullName}"  class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label required">系统LOGO</label>
                    <div class="layui-input-block">
                        <div  class="layui-upload-drag" style="height: 100px;width: 100px;padding: 10px;" id="sys-logo">
                            <div th:class="${not #strings.isEmpty(sysConfig?.systemLogo)} ? 'layui-hide' : ''" id="sys-logo-upload" >
                                <i class="layui-icon layui-icon-upload"></i>
                                <div>点击上传，或将文件拖拽到此处</div>
                            </div>
                            <div th:class="${not #strings.isEmpty(sysConfig?.systemLogo)} ? '' : 'layui-hide'" id="sys-logo-preview" style="margin-top: -20px;">
                                <hr> <img th:src="${sysConfig?.systemLogo}"  alt="上传成功后渲染" style="max-width: 100%">
                            </div>
                            <tip>仅支持png图片</tip>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">登录页背景图</label>
                    <div class="layui-input-block">
                        <div  class="layui-upload-drag" style="height: 100px;width: 200px;padding: 10px;" id="login-back">
                            <div th:class="${not #strings.isEmpty(sysConfig?.loginBackImg)} ? 'layui-hide' : ''" id="login-back-upload" >
                                <i class="layui-icon layui-icon-upload"></i>
                                <div>点击上传，或将文件拖拽到此处</div>
                            </div>
                            <div th:class="${not #strings.isEmpty(sysConfig?.loginBackImg)} ? '' : 'layui-hide'" id="login-back-preview" style="margin-top: -20px;">
                                <hr> <img th:src="${sysConfig?.loginBackImg}"  alt="上传成功后渲染" style="max-width: 100%">
                            </div>
                            <tip>仅支持png图片</tip>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-xs12 layui-col-sm12 layui-col-md6 layui-col-lg6">
                <div class="layui-form-item">
                    <label class="layui-form-label">网站标题</label>
                    <div class="layui-input-block">
                        <input type="text" name="websiteTitle" th:value="${sysConfig?.websiteTitle}"  class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label ">网站图标</label>
                    <div class="layui-input-block">
                        <div  class="layui-upload-drag" style="height: 40px;width: 100px;padding: 10px;" id="website-icon">
                            <div th:class="${not #strings.isEmpty(sysConfig?.websiteIcon)} ? 'layui-hide' : ''" id="website-icon-upload" >
                                <i class="layui-icon layui-icon-upload"></i>
                                <div>点击上传，或将文件拖拽到此处</div>
                            </div>
                            <div th:class="${not #strings.isEmpty(sysConfig?.websiteIcon)} ? '' : 'layui-hide'" id="website-icon-preview" style="margin-top: -20px;">
                                <hr> <img th:src="${sysConfig?.websiteIcon}"  alt="上传成功后渲染" style="max-width: 100%">
                            </div>
                            <tip>仅支持ico图片</tip>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">网站关键字</label>
                    <div class="layui-input-block">
                        <input type="text" name="websiteKeywords" th:value="${sysConfig?.websiteKeywords}"  class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">网站描述</label>
                    <div class="layui-input-block">
                        <input type="text" name="websiteDesc" th:value="${sysConfig?.websiteDesc}"  class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">网站备案号</label>
                    <div class="layui-input-block">
                        <input type="text" name="websiteRecordNo" th:value="${sysConfig?.websiteRecordNo}"  class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">网站图版权信息</label>
                    <div class="layui-input-block">
                        <input type="text" name="websiteCopyRight" th:value="${sysConfig?.websiteCopyRight}"  class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 layui-col-lg12">
                <div class="layui-form-item">
                    <div class="layui-input-block" style="display: grid;place-items: center;margin-left: 0px">
                        <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/layuimini/lib/layui-v2.6.3/layui.js}" charset="utf-8"></script>
<script th:src="@{/layuimini/js/lay-config.js?v=1.0.4}" charset="UTF-8"></script>
<script type="text/javascript" th:inline="javascript">
    layui.use(['form','notice'], function () {
        let $ = layui.jquery,
            form = layui.form,
            upload = layui.upload,
            element = layui.element,
            notice = layui.notice;

        let ctxPath = /*[[@{/}]]*/'';


        //系统logo
        upload.render({
            elem: '#sys-logo',
            url: ctxPath+'system/sysConfig/updateSysConfigImage',
            data: {imageType: 'sysLogo'},
            accept: 'images',
            acceptMime: 'image/png',
            exts: 'png',
            done: function(res){
                notice.success('上传成功');
                $('#sys-logo-preview').removeClass('layui-hide').find('img').attr('src', res.files.file);
                $('#sys-logo-upload').addClass('layui-hide');
            }
        });
        //登陆背景
        upload.render({
            elem: '#login-back',
            url: ctxPath+'system/sysConfig/updateSysConfigImage',
            data: {imageType: 'loginBack'},
            accept: 'images',
            acceptMime: 'image/png',
            exts: 'png',
            done: function(res){
                notice.success('上传成功');
                $('#login-back-preview').removeClass('layui-hide').find('img').attr('src', res.files.file);
                $('#login-back-upload').addClass('layui-hide');
            }
        });

        //网站图标
        upload.render({
            elem: '#website-icon',
            url: ctxPath+'system/sysConfig/updateSysConfigImage',
            data: {imageType: 'webIcon'},
            accept: 'images',
            acceptMime: 'image/x-icon',
            exts: 'ico',
            done: function(res){
                notice.success('上传成功');
                $('#website-icon-preview').removeClass('layui-hide').find('img').attr('src', res.files.file);
                $('#website-icon-upload').addClass('layui-hide');
            }
        });

        //监听提交按钮
        form.on('submit(saveBtn)', function (data) {
            $.ajax({
                type:'PUT',
                url:ctxPath+'system/sysConfig/updateSysConfig',
                data:JSON.stringify(data.field),
                contentType: 'application/json;charset=utf-8;',
                dataType:'json',
                success:function (res){
                    if(res.code === 200){
                        notice.success('操作成功');
                    }else{
                        notice.error(res.msg);
                    }
                }
            });
        });
    });
</script>
</body>
</html>